<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加文字</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .tccDraw {
            width: 100%;
            height: 600px;
        }
    </style>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="js/OBJLoader.js"></script>
    <script src="js/CSS2DRenderer.js"></script>
</head>

<body>
    <div id="tccDraw" class="tccDraw">
    </div>
    <input type="button" class="big" value="放大" onclick="zoomOut()" style="float: right;">
    <input type="button" class="big" value="正方体放大" onclick="BoxIn()" style="float: right;">
    <input type="button" class="big" value="正方体缩小" onclick="BoxOut()" style="float: right;">
    <script>
        let scene, camera, renderer, labelRenderer, controls, showDiv, directionalLight, mesh, stats, CSSRender;

        /* 场景 */
        function initScene() {
            showDiv = document.getElementById("tccDraw");
            scene = new THREE.Scene();
            let axesHelper = new THREE.AxesHelper(500);
            scene.add(axesHelper);
        }
        /* 相机 */
        function initCamera() {
            //透视相机
            camera = new THREE.PerspectiveCamera(45, showDiv.clientWidth / showDiv.clientHeight, 10, 15000);
            camera.position.set(0, 500, 350);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }

        /* 渲染器 */
        function initRender() {

            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(showDiv.clientWidth, showDiv.clientHeight);
            showDiv.appendChild(renderer.domElement);

            //加载文字标注和图片标注使用的渲染器
            CSSRender = new THREE.CSS2DRenderer();
            CSSRender.setSize(showDiv.clientWidth, showDiv.clientHeight);
            CSSRender.domElement.style.position = 'absolute';
            CSSRender.domElement.style.top = 0;
            showDiv.appendChild(CSSRender.domElement);
        }

        /* 灯光 */
        function initLight() {
            let ambientLight = new THREE.AmbientLight(0xCCCCCC);
            scene.add(ambientLight);
            directionalLight = new THREE.DirectionalLight(0x585858);
            directionalLight.position.set(0, 3500, 0);
            scene.add(directionalLight);
        }

        /* 控制器 */
        function initControls() {
            controls = new THREE.OrbitControls(camera, showDiv);
        }

        /* 初始化性能插件status */
        function initStats() {
            stats = new Stats();
            document.body.appendChild(stats.dom);
        }

        /*构建各个面颜色随机的立方体*/
        function addBox() {
            var cubeGeo = new THREE.BoxGeometry(50, 50, 50);
            var mats = [];
            for (var i = 0; i < 6; i++) {
                var material = new THREE.MeshBasicMaterial({ color: new THREE.Color(Math.random(0, 5) * 0xffffff) });
                mats.push(material);
            }
            mesh = new THREE.Mesh(cubeGeo, mats);
            scene.add(mesh);
        }
        /*创建css2dobject*/
        function create2DObject() {
            var div = document.createElement("div");
            div.style.width = '200px';
            div.style.height = '100px';
            div.style.background = 'rgba(10,18,51,0.8)';
            div.style.color = '#ffffff'
            div.textContent = '彩色旋转小盒子'
            div.className = 'label'
            var label = new THREE.CSS2DObject(div);
            label.position.set(0, 110, 0);
            var imgDiv = document.createElement("img");
            imgDiv.src = "resource/create.gif";
            imgDiv.width = 30;
            imgDiv.height = 30;
            div.appendChild(imgDiv);
            scene.add(label);
        }
        /* 键盘按下的监听触发方法 */
        function onKeydown(event) {
            console.log(event.keyCode);
            if (event.keyCode == '32') {
                mesh.visible = false;
            } else if (event.keyCode == '27') {
                mesh.visible = true;
            }
        }
        /* 场景放大 */
        function zoomOut() {
            controls.zoomIn();
        }
        /* 正方体放大 */
        function BoxIn() {
            mesh.scale.set(1.5, 1.5, 1.5);
            mesh.position.set(100, 100, 100);
        }
        /* 正方体缩小 */
        function BoxOut() {
            mesh.scale.set(0.2, 0.2, 0.2);
            mesh.position.set(0, 0, 0);
        }
        window.addEventListener("keydown", onKeydown, false);
        initScene();
        initCamera();
        initLight();
        initControls();
        initRender();
        initStats();
        addBox();
        create2DObject();
        animate();
        /* 循环渲染 */
        function animate() {
            mesh.rotateY(0.01);
            mesh.rotateX(0.01);
            mesh.rotateZ(0.01);
            stats.update();
            controls.update();
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
            CSSRender.render(scene, camera);
        }
    </script>
</body>

</html>